<template>
  <div class="vue_app" id="wrapper">
    <keep-alive>
      <m-header class="my-title" title="个人中心" :hasTitle="true" :hasList="true" :hasCart="true"></m-header>
    </keep-alive>
    <!-- <div style="height:3rem;"></div> -->
    <div class="centent">
      <!--用户信息-->

      <div class="user_information">
        <!--<keep-alive>-->
        <div class="user_con" @click="login ? $router.push('/main/persion') : $router.push('/main/login')">
          <!-- <router-link :to="login ? 'persion' : 'login'"> -->
          <div class="headImg">
            <img :src="userInfoCache&&userInfoCache.imgUrl ? userInfoCache.imgUrl : 'static/image/user4.png'"
                 class="aui-img-round aui-list-img-sm">
          </div>
          <dl style="float:left;text-align:left;">
            <dt>{{userInfoCache&&userInfoCache.username || '登录/注册'}}</dt>
            <dd v-show="login">{{userInfoCache&&userInfoCache.phone}}</dd>
          </dl>
          <!-- </router-link> -->
        </div>
        <!--</keep-alive>-->
        <div class="qr_code_list scan" id="scan">
          <!-- <router-link :to="{path:login ?'code_pay' : 'login'}"> -->
          <li @click="judgeLogin('code_pay')">
            <i class="icon njfont nj-fukuanma"></i>
            <span style="color:#ffffff;">付款码</span>
          </li>
          <!-- </router-link> -->
          <!-- <router-link :to="{path:login ?'code' : 'login'}"> -->
          <li @click="judgeLogin('code')">
            <i class="icon njfont nj-yinhangqia"></i>
            <span style="color:#ffffff;">会员卡</span>
          </li>
          <!-- </router-link> -->
        </div>
      </div>
      <div class="integral_container" v-if="rule">
        <div class="model">
          <!-- <router-link :to="{path:login?'/main/integral':'login'}"> -->
            <div class="class_integral" @click="judgeLogin('integral')">
              <span class="btn_integral_1">签到送积分，更有惊喜大奖！</span>
              <span class="aui-btn aui-btn-outlined btn_integral">立即签到</span>
            </div>
          <!-- </router-link> -->
        </div>
      </div>
      <div class="aui-row order_class" id="flex">
        <div class="aui-col-5" @click="turn(1)">
          <i class="icon njfont nj-daifukuan"></i>
          <div class="aui-grid-label">待付款</div>
          <div class="aui-badge" v-show="order&&order.unPayNum">{{order&&order.unPayNum}}</div>
          <div class="right_line"></div>
        </div>
        <div class="aui-col-5" @click="turn(2)">
          <i class="icon njfont nj-daipeisong"></i>
          <div class="aui-grid-label">待配送</div>
          <div class="aui-badge" v-show="order&&order.waitLogisticsNum">{{order&&order.waitLogisticsNum}}</div>
          <div class="right_line"></div>
        </div>
        <div class="aui-col-5" @click="turn(3)">
          <i class="icon njfont nj-peisongzhong"></i>
          <div class="aui-grid-label">配送中</div>
          <div class="aui-badge" v-show="order&&order.onLogisticsNum">{{order&&order.onLogisticsNum}}</div>
          <div class="right_line"></div>
        </div>
        <div class="aui-col-5" @click="turn(4)">
          <i class="icon njfont nj-daipingjia"></i>
          <div class="aui-grid-label">待评价</div>
          <div class="aui-badge" v-show="order&&order.successLogisticsNum">{{order&&order.successLogisticsNum}}</div>

        </div>
        <div id="all_order" class="aui-col-5 lef_line" @click="turn(0)">
          <i class="icon njfont nj-quanbudingdan"></i>
          <div class="aui-grid-label">全部订单</div>
          <!-- <div class="aui-badge" v-show="order.totalNum">{{order.totalNum}}</div> -->
          <em></em>
        </div>
      </div>
      <!-- 钱包 -->
      <div class="aui-row order_class" id="wallet_flex">
        <div class="aui-col-6 wallet" @click="judgeLogin('MyWallet')">
          <!-- <router-link :to="{path:login ?'MyWallet' : 'login'}"> -->
            <i class="icon njfont nj-qianbao1" style="color:#ea4f2f;"></i>
            <div class="">我的钱包</div>
            <div class="aui-grid-label">￥{{selectPurseInfoNum || 0}}</div>
          <!-- </router-link> -->
        </div>

        <div class="aui-col-6 wallet" @click="judgeLogin('MyPoints')">
          <!-- <router-link :to="{path:login ?'MyPoints' : 'login'}"> -->
            <i class="icon njfont nj-jifen1" style="color:#e8bd4f;"></i>
            <div class="">积分</div>
            <div class="aui-grid-label">{{userInfo ? userInfo.remainingscore : 0}}</div>
          <!-- </router-link> -->
        </div>

        <div class="aui-col-6 wallet" @click="judgeLogin('myGiftCard')">
          <!-- <router-link :to="{path:login ?'myGiftCard' : 'login'}"> -->
            <i class="icon njfont nj-lipin" style="color:#e8bd4f;"></i>
            <div class="">礼品卡</div>
            <div class="aui-grid-label">{{giftCardTotal || 0}}</div>
          <!-- </router-link> -->
        </div>

        <div class="aui-col-6 wallet" @click="judgeLogin('myCoupons')">
          <!-- <router-link :to="{path:login ?'myCoupons' : 'login'}"> -->
            <i class="icon njfont nj-youhuiquan" style="color:#f39e4d;"></i>
            <div class="">优惠券</div>
            <div class="aui-grid-label">{{discountNUm || 0}}</div>
          <!-- </router-link> -->
        </div>

        <!--  <div class="aui-col-5 wallet">
           <i class="icon njfont nj-huiyuanqia" style="color:#22b4af;"></i>
           <div class="aui-grid-label">会员卡</div>
         </div> -->
      </div>
      <!--服务预约 end-->
      <div class="aui-content aui-margin-b-15">
        <ul class="aui-list aui-list-in">
          <!-- <router-link :to="{path:login ? 'address' : 'login'}"> -->
            <li id="management_address" class="aui-list-item" @click="judgeLogin('address')">
              <div class="aui-list-item-label-icon">
                <i class="icon njfont nj-dizhi"></i>
              </div>
              <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">我的收货地址</div>
                <p>管理</p>
              </div>
            </li>
          <!-- </router-link> -->
          <!-- <router-link :to="{path:login ?'myCoupons' : 'login'}">
            <li id="my_collection" class="aui-list-item">
              <div class="aui-list-item-label-icon">
                <i class="icon njfont nj-gouwuquan"></i>
              </div>
              <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">我的优惠券</div>
                <div class="aui-list-item-right">
                  <div :class="discountNUm ? 'aui-badge' : ''" style="position:relative;top:0; left:0">{{discountNUm}}
                  </div>
                </div>
              </div>
            </li>
          </router-link>
           <router-link :to="{path:login ?'MyPoints' : 'login'}">
            <li id="my_collection" class="aui-list-item">
              <div class="aui-list-item-label-icon">
                <i class="icon njfont nj-jifen"></i>
              </div>
              <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">我的积分</div>

                <div class="aui-list-item-right">
                  <div :class="remainingscore ? 'aui-badge' : ''" style="position:relative;top:0; left:0">{{remainingscore}}</div>
                </div>
              </div>
            </li>
          </router-link>
           <router-link :to="{path:login ?'code' : 'login'}">
            <li id="my_collection" class="aui-list-item">
              <div class="aui-list-item-label-icon">
                <i class="icon njfont nj-fukuanma"></i>
              </div>
              <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">我的二维码</div>
              </div>
            </li>
          </router-link>   -->
          <!-- <router-link :to="{path:login ? 'myMessage' : 'login'}"> -->
            <li class="aui-list-item" @click="judgeLogin('myMessage')">
              <div class="aui-list-item-label-icon">
                <i class="icon njfont nj-xiaoxi"></i>
              </div>
              <div id="new_message" class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">我的消息</div>
                <div class="aui-list-item-right">
                  <div :class="newsData ? 'aui-badge' : ''" style="position:relative;top:0; left:0">{{newsData || 0}}
                  </div>
                </div>
              </div>
            </li>
          <!-- </router-link> -->
          <!-- <router-link :to="{path:login ?'collect' : 'login'}"> -->
            <li id="my_collection" class="aui-list-item" @click="judgeLogin('collect')">
              <div class="aui-list-item-label-icon">
                <i class="icon njfont nj-shoucang"></i>
              </div>
              <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">我的收藏</div>
                <div class="aui-list-item-right">
                  <div :class="collectNum ? 'aui-badge' : ''" style="position:relative;top:0; left:0">{{collectNum ||
                    0}}
                  </div>
                </div>
              </div>
            </li>
          <!-- </router-link> -->
          <!-- <router-link :to="{path:login ?'foodChecked' : 'login'}"> -->
            <li id="server_center" class="aui-list-item" @click="judgeLogin('foodChecked')">
              <div class="aui-list-item-label-icon">
                <i class="icon njfont nj-jiancebaogao"></i>
              </div>
              <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">食材检测报告</div>
              </div>
            </li>
          <!-- </router-link> -->
          <!-- <router-link :to="{path:login ?'roundStores' : 'login'}"> -->
            <li id="server_cente" class="aui-list-item" @click="judgeLogin('roundStores')">
              <div class="aui-list-item-label-icon">
                <i class="icon njfont nj-mendian"></i>
              </div>
              <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">周边门店</div>
              </div>
            </li>
          <!-- </router-link> -->
          <!-- <router-link :to="{path:login ?'server' : 'login'}"> -->
            <li id="server_centr" class="aui-list-item" @click="judgeLogin('server')">
              <div class="aui-list-item-label-icon">
                <i class="icon njfont nj-fuwu"></i>
              </div>
              <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">服务中心</div>
              </div>
            </li>
          <!-- </router-link> -->
          <!-- <router-link :to="{path:login ?'/main/online' : 'login'}" v-on:turn="online"> -->
          <li id="server_cener" class="aui-list-item" @click="online">
            <div class="aui-list-item-label-icon">
              <i class="icon njfont nj-kefu"></i>
            </div>
            <div class="aui-list-item-inner aui-list-item-arrow">
              <div class="aui-list-item-title">在线客服</div>
            </div>
          </li>
          <!-- </router-link> -->
          <router-link to="about">
            <li id="aboutus" class="aui-list-item">
              <div class="aui-list-item-label-icon">
                <i class="icon njfont nj-haoyou"></i>
              </div>
              <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">关于我们</div>
              </div>
            </li>
          </router-link>
          <li id="aboutu" class="aui-list-item" @click="confirm" v-show="login">
            <div class="aui-list-item-label-icon">
              <i class="icon njfont nj-guanbi"></i>
            </div>
            <div class="aui-list-item-inner aui-list-item-arrow">
              <div class="aui-list-item-title">注销</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- <div class="aui-content aui-margin-b-15">
      <ul class="aui-list aui-list-in">

      </ul>
    </div> -->
  </div>
</template>

<script>
  import {mapMutations, mapActions, mapGetters} from 'vuex';
  import {
    getEnableSignRule,
    signout,
    findMessageList,
    getAllOrder,
    //  getvoucher,
    countByStatus,
    getWaitActivationCardCount,
    getCouponCodeCountOfUser,
    selectPurseInfo,
    getUserInfoAgain
  } from '../../api/wxh/getData.js';
  import {Toast} from '../../utils/toast.js';
  import Header from '../../real-containers/header';
  import {MessageBox} from '../../ui-components';
  import axios from 'axios';
  import {queryCollect} from '../../api/zxApi.js';
  import {querySubmitedInfor} from '@/utils/ReturnAxios';
  import goOnlineServer from '@/utils/ZWY/onlineServer';

  export default {
    data() {
      return {
        username: null, //用户昵称
        imgUrl: null, //头像地址
        account: null, //账号密码登录
        phone: null,
        newsData: 0,
        order: [],
        discountNUm: null, //优惠券数量
        collectNum: 0, //收藏数量
        orderInforNum: null, // 售后服务的数量
        giftCardTotal: null, //礼品卡总数
        time: null,
        selectPurseInfoNum: null, //钱包余额
        remainingscore: null,
        rule: false, //签到
        userInfoCache: '',
      };
    },
    created() {
      this.init();
    },
    beforeDestroy() {
      clearInterval(this.time);
    },
    computed: {
      ...mapGetters('wxh', ['sessionId', 'userInfo', 'login']),
      // userInfoCache() {
      //   console.log('thios', this.login, this.userInfo);
      //   let info = this.$store.getters['wxh/userInfo'];
      //   if(this.login) {
      //     let phone_1 = info.mobile.slice(0, 3);
      //     let phone_2 = info.mobile.slice(7);
      //     let phone_3 = '****';
      //     return {
      //       imgUrl: info.vipheadphoto,
      //       username: info.vipname,
      //       phone: phone_1 + phone_3 + phone_2
      //     }
      //   }
      // },
    },
    components: {
      'm-header': Header,
    },
    methods: {
    	...mapMutations('xxy', ["setarrpopupnum"]),
      ...mapActions('wxh', ['getUserInfo']),
      ...mapActions('qxz', ['updateLocation', 'updateScopeOut']),
      ...mapMutations('wxh', [
        'USER_INFO',
        'ClEAR_SESSIONID',
        'LOGO_OUT',
        'LOGO_IN',
        'CLEAR_INFO',
        'RECORD_SESSIONID',
      ]),
      ...mapMutations('zwy', [
        'setvuexPhoneNumber',
				'setvuexPassword'
      ]),
      async init() {
        this.initData();
        //初始化优惠券信息

        if (!this.sessionId) {
          return;
        }
        Promise.all([
          this.getVoucher(),
          this.quertDisSubmitInfor(),
          this.Message(),
          this.getOrder(),
          this.getCollectNum(),
          this.getGiftCardTotal(),
          this.getSelectPurseInfo(),
          this.SignRule(),
        ]);
      },
      async initData() {
        if (!this.login) {
          this.username = '登录/注册';
          return;
        }
        
        if (localStorage.getItem('erpVipId') === 1) {
          localStorage.removeItem('erpVipId');
        } else if (this.sessionId) {
          this.showLoading();
          await this.reFreshUserInfo(this);
          this.hideLoading();
        }

        let info = this.$store.getters['wxh/userInfo'];
        let phone_1 = info.mobile.slice(0, 3);
        let phone_2 = info.mobile.slice(7);
        let phone_3 = '****';
        this.userInfoCache = {
          imgUrl: info.vipheadphoto,
          username: info.vipname,
          phone: phone_1 + phone_3 + phone_2,
        };
      },
      //签到
      async SignRule() {
        let res = await getEnableSignRule();
        if (res.returnCode == 1 && res.data[0].openState === 1) {
          this.rule = true;
        }
        return this.rule;
      },
      async Message() {
        let req = await findMessageList({status: 1, enterpriseCode: api.enterpriseCode});
        if (req.data[0]) {
          req.data[0].results.forEach(val => {
            if (val.status === 1) {
              this.newsData++;
            }
          });
        }
      },
      //优惠券
      async getVoucher() {
        try {
          let res = await getCouponCodeCountOfUser();
          let num = res.data[0].received;
          this.discountNUm = num;
        } catch (err) {
        }
      },
      //钱包余额
      async getSelectPurseInfo() {
        let req = await selectPurseInfo();
        req.returnCode != 0 && req.data ? (this.selectPurseInfoNum = req.data[0].availAmount) : '';
      },
      //获取礼品卡
      async getGiftCardTotal() {
        if (!this.login) {
          return;
        }
        let res = await getWaitActivationCardCount();
        this.giftCardTotal = res.data[0];
      },
      //获取可售后数据
      async quertDisSubmitInfor() {
        if (!this.login) {
          return;
        }
        var res = await querySubmitedInfor(2, this.sessionId);
        res = res.data;
        if (res.returncode == 0) {
          return;
        }
        var data = res.data;
        var filterData = data.filter(item => {
          var serviceState = item.serviceState ? parseInt(item.serviceState) : 0;
          var isretrue = true;
          switch (serviceState) {
            case 3:
              isretrue = false;
              break;
            case 5:
              isretrue = false;
              break;
            case 8:
              isretrue = false;
              break;
            case 10:
              isretrue = false;
              break;
            case 12:
              isretrue = false;
            case 13:
              isretrue = false;
            case 15:
              isretrue = false;
              break;
            default:
              break;
          }

          return isretrue;
        });

        this.orderInforNum = filterData.length || 0;
      },
      //获取订单数据
      async getOrder() {
        if (!this.login) {
          return;
        }
        let res = await countByStatus();
        this.order = res.data[0];
      },
      //注销
      confirm() {
        MessageBox.confirm('确认要注销？').then(param => {
          this.signOut();
        });
      },
      async signOut() {
        if (this.login) {
          // this.ClEAR_SESSIONID('sessionId');
          
          //true: app logout;
          let res = await signout('true');
          if (Number(res.returncode) === 1 || Number(res.returnCode) === 1) {
            this.LOGO_OUT(false);
            this.CLEAR_INFO(null);
            //
            this.updateLocation(null);
            this.updateScopeOut(null);
            localStorage.setItem('chooseAddressActiveIndex', null);
            localStorage.setItem('locateIn', null);
            localStorage.setItem('locateOut', null);

            //注销注册信息
            this.setvuexPhoneNumber(null);
            this.setvuexPassword(null);  

            //首页弹框注销时显示
            this.setarrpopupnum([])
            localStorage.setItem("phoneNumber", "");

            this.imgUrl = null;
            localStorage.setItem('cartArray', '');
            localStorage.setItem('cartFoodArray', '');
            this.ClEAR_SESSIONID('sessionId');            
            localStorage.removeItem('sessionId', '');
            this.$store.dispatch('cjy/queryCart');
            // this.$router.push({path: '/main/login', query: {logOut: true}});
            let that = this;
            const afterObj = {
              success: function () {
                that.$router.push({path: '/main/login', query: {logOut: true}});
                cordova.exec(function () {
                }, function (res) {
                }, "CommonPlugin", "logout", []);
              },
              fail: function () {
                that.$router.push({path: '/main/login', query: {logOut: true}});
              }
            };
            if (navigator.userAgent.indexOf('iPhone') > -1 && navigator.userAgent.indexOf('xiangpu') > -1 ) {
              cordova.exec(function (res) {
                let Version = Number(String(res).split('.').join(''));
                Version == 102 ? afterObj.success() : afterObj.fail();

              }, function (res) {
              }, "CommonPlugin", "getAppVersion", []);
            } else if (navigator.userAgent.indexOf('Android') > -1 && navigator.userAgent.indexOf('xiangpu') > -1) {
              cordova.exec(function (res) {
                let Version = Number(String(res).split('.').join(''));
                Version <= 123? afterObj.success() : afterObj.fail();
              }, function (res) {
              }, "AppInfo", "getVersion", []);
            } else if(navigator.userAgent.indexOf('xiangpu') == -1 ){
              afterObj.fail();
            }
          } else if (res.returncode === 0 || res.returnCode === 0) {
            Toast({
              message: '注销失败',
              iconClass: 'aui-iconfont aui-icon-close',
              duration: window.api.alertTime,
            });
          }
        }
      },
      getCollectNum() {
        if (!this.login) {
          return;
        }
        let sessionId = this.sessionId;
        if (sessionId) {
          let params = {
            storeCode: window.api.storeCode,
            usePlatform: 'WAP',
          };

          axios({
            url: window.api.goods_host + '/collection/goods',
            method: 'get',
            params,
            headers: {sessionId: sessionId},
          }).then(data => {
            if (data.data.returncode === 0) {
              this.collectNum = 0;
              return;
            }
            var data = data.data.data
            //获取全部商品数据的方法
            this.collectNum = data ? data.length : 0;
            // this.getCollectData(data)
          });
        } else {
          this.collectNum = 0;
        }
      },

      turn(val) {
        if (!this.login) {
          this.$router.push('login');
        } else {
          this.$router.push({path: 'order', query: {orderStatus: val}});
        }
      },
      async online() {
        // if (!this.login) {
        //   this.$router.push({path: '/main/login'});
        //   return;
        // }
        // let req = {
        //   userid: this.userInfo.userid,
        //   userName: encodeURI(this.userInfo.mobile),
        //   enterpriseid: this.userInfo.enterpriseid, //测试
        //   sessionId: this.sessionId
        // };
        // let url = "http://yuchai.weilian.cn:17999/yncrm/crm_web_client";//现网
        // let url = "http://116.10.197.142:13008/yncrm/crm_web_client";//测试
//      let url = 'http://test.crm.scn.weilian.cn/static/crm/customerChat.html';//old  原来的
        // let url = 'http://test.crm.scn.weilian.cn/static/custchat/index.html';//new
//      let dataStr = ''; //数据拼接字符串
//      Object.keys(req).forEach(key => {
//        dataStr += key + '=' + req[key] + '&';
//      });
//
//      if (dataStr !== '') {
//        dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
//        url = url + '?' + dataStr;
//      }

        //测试环境
    //  let userIconUrl = this.userInfoCache.imgUrl?this.userInfoCache.imgUrl:'static/image/user4.png';
    //  let url = 'http://test.crm.scn.weilian.cn/static/custchat/index.html' + '?sessionId=' + this.sessionId+'&enterpriseId=' + this.userInfo.enterpriseid+'&userIconUrl=' + userIconUrl;
    //   location.href = url;
    //  this.$router.push({path: 'online', query: {urlData: url}});
        //生产暂时跳服务中心
        // this.$router.push('server')

        if(this.login){
          goOnlineServer(this)
        }else{
          this.$router.push({path: 'login'});
        }
      },
      async judgeLogin(val){
        if(this.login){
          this.$router.push({path: val});
        }else{
          this.$router.push({path: 'login'});
          
        }
      }
    },
  };
</script>
<style scoped>
  #wrapper {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*overflow-y:scroll;*/
    display: flex;
    flex-flow: column nowrap;
  }

  .centent {
    /*width:100%;*/
    /*height: 100%;*/
    flex: 1;
    overflow-y: scroll;
  }

  .nav_root {
    position: fixed;
  }

  .user_information_1 {
    width: 100%;
    height: 100px;
    background: rgba(41, 154, 40, 1);
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .user_information_1 a {
    display: inline-block;
    color: #fff;
  }

  .user_information {
    background: rgba(41, 154, 40, 1);
    padding: 1rem 0.5rem;
  }

  #flex,
  #wallet_flex {
    display: flex;
  }

  #flex_1,
  #wallet_flex {
    display: flex;
    justify-content: space-around;
    /*padding-top: 1rem;*/
    /*margin-bottom: 0;*/
    /*background: rgba(234, 57, 57, 0.7);*/
  }

  .wallet {
    flex: 1 1 25%;
  }

  .order_class {
    border: none;
  }

  img {
    width: 3rem;
    height: 3rem;
  }

  .headImg {
    float: left;
    color: #fff;
  }

  .headImg span {
    display: block;
    margin-top: 0.4rem;
    font-size: 13px;
  }
  
  #wrapper .qr_code_list li:first-child{
  	padding-left: 0px;
  }

  /*钱包*/

  .wallet a {
    color: #2c3e50;
  }

  .wallet .icon {
    margin-bottom: 0.2rem;
  }

  .integral_container {
    height: 2.5rem;
    background: rgba(41, 154, 40, 1);
  }

  .model {
    height: 2.5rem;
    background: rgba(0, 0, 0, 0.1);
  }

  .class_integral {
    width: 95%;
    /*display: flex;*/
    /*justify-content: space-between;*/
    margin: auto;
    padding-top: 0.5rem;
    color: #fff;
    line-height: 1.5rem;
    position: relative;
  }

  .btn_integral_1 {
    position: absolute;
    left: 0;
  }

  .btn_integral {
    height: 1.4rem;
    width: 3.5rem;
    padding: 0;
    margin: 0;
    color: rgba(24, 113, 27, 1);
    position: absolute;
    right: 0;
    color: rgba(41, 154, 40, 1);
  }

  .aui-btn-outlined {
    background: #fff !important;
  }

  .my-title {
    position: static;
  }

  .aui-list-item-title {
    width: auto;
    min-width: 50%;
    text-align: left;
  }
</style>
